<template>
	<view class="all">
		<view class="line">
			<view class="title">派箱箱</view>
		</view>
		<view class="box">

			<view class="row" v-for="row in 18" :key="row">
				<view class="col" v-for="item in goods" :key="item.id">
					<image :src="item.cover_image"></image>
					<view class="dz" :class="'lv'+item.type"></view>
				</view>
			</view>
		</view>
		<view class="btn" @click="jump()">跳过</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				goods: [],
				bgmMusic: null,
				timer: true
			}
		},
		created() {

		},
		mounted() {
			// this.$emit('paly')
			this.timer = true
			this.timer = setTimeout(() => {
				if (!this.timer) return false
				this.$emit('close')
			}, 6000)
			if (this.list.length > 16) {
				this.goods = this.shuffle(this.list.slice(0, 16))
			} else {
				const data = []
				const count = Math.ceil(16 / this.list.length)
				for (let i = 0; i < count; i++) {
					data.push(...this.list)
				}
				this.goods = this.shuffle(data.slice(0, 16))
			}
			this.$store.commit('playMusic', '/static/choujiang.mp3')
		},
		beforeDestroy() {
			this.$store.commit('playMusicStop')	
			// this.$emit('pause')
			this.timer = null
		},
		methods: {
			jump() {
				this.$emit('close')
			},
			shuffle(arr) {
				let length = arr.length,
					randomIndex,
					temp;
				while (length) {
					randomIndex = Math.floor(Math.random() * (length--));
					temp = arr[randomIndex];
					arr[randomIndex] = arr[length];
					arr[length] = temp
				}
				return arr;
			}
		}
	}
</script>

<style scoped lang="scss">
	.all {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, .8);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow-y: auto;
		box-sizing: border-box;

		.line {
			width: 100%;
			height: 950rpx;
			position: absolute;
			left: 0%;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			// transform: translateY(-50%);
			// align-items: center;
			justify-content: center;
			border-top: 1px solid;
			border-bottom: 1px solid;
			/*设置线性渐变*/
			border-image: linear-gradient(to right, #040309, #aabfd2, #040309) 2 2 2 2;
			background: linear-gradient(to right, rgba(8, 7, 13, .5), rgba(10, 28, 48, .5), rgba(8, 7, 13, .5));

			.title {
				height: 80rpx;
				padding: 20rpx 50rpx;
				// background-color: #194960;
				margin-bottom: 40rpx;
				background-image: url('@/static/images/tiaoguo.png');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center center;
			}


		}

		.box {
			// width: 100vw;
			display: flex;
			animation: move 6s 1 linear forwards;
			margin-bottom: 200rpx;
		}

		.row {
			width: 90vw;
			display: flex;
			align-items: center;
			// flex-direction: column;
			justify-content: space-around;
			flex-wrap: wrap;
			padding-top: 550rpx;

			.col {
				margin-bottom: 30rpx;

				image {
					width: 150rpx;
					height: 150rpx;
					z-index: 2;
					position: relative;
				}

				.dz {
					width: 100%;
					height: 40rpx;
					transform: skew(-15deg, 0);
					background-color: red;
					margin-top: -40rpx;
				}
			}
		}

		.btn {
			font-size: 36rpx;
			background-image: url('@/static/images/tiaoguo.png');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;
			color: #fff;
			padding: 30rpx 250rpx;
			margin-bottom: 200rpx;
		}
	}

	.lv1 {
		background-color: #7e1221 !important;
	}

	.lv2 {
		background-color: #57517d !important;
	}

	.lv3 {
		background-color: #ba886f !important;
	}

	.lv4 {
		background-color: #6172aa !important;
	}

	@keyframes move {
		0% {
			transform: translateX(-105rpx);
		}

		20% {
			transform: translateX(500rpx);
		}

		80% {
			transform: translateX(3800rpx);
		}

		100% {
			transform: translateX(4450rpx);
		}
	}
</style>
